<template>
    <!-- 
        点击用户头像 => 点击“账号设置” => 点击“修改密码”，执行如上操作后显示的界面
     -->
    <div id="user-center-accountSettings-updatePassword-contrainer">
        <el-row id="user-center-accountSettings-updatePassword-contrainer-header">
            <span>
                修改密码
            </span>
        </el-row>
        <el-divider/>
        <el-row id="user-center-accountSettings-updatePassword-contrainer-main">
            <!-- <el-form label-width="120px" >
                <el-form-item label="输入旧密码" >
                    <el-input type="password" v-model="oldPwd"  @blur="pwdEmpty(oldPwd)" />sefs
                    <div v-if="oldPwdDisplay" class="fontColor" >不能为空</div>
                </el-form-item>
                <el-form-item label="输入新密码">
                    <el-input type="password" v-model="newPwd1" @blur="pwdEmpty(newPwd1)"/>
                </el-form-item>
                <el-form-item label="确认新密码">
                    <el-input type="password" v-model="newPwd2" @blur="pwdEmpty(newPwd2)"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">确认</el-button>
                </el-form-item>
            </el-form> -->
            <el-row>
                <el-col :span="5"> <div class="font">请输入旧密码 </div></el-col>
                <el-col :span="13"><el-input type="password" v-model="oldPwd"  @blur="oldPwdEmpty()" /></el-col>
                <el-col :span="6">
                    <div v-if="oldPwdDisplay" class="fontColor" >不能为空</div>
                    <div v-if="oldPwdError" class="fontColor" >旧密码错误</div>
                </el-col>
            </el-row><br>
            <el-row>
                <el-col :span="5"> <div class="font">请输入新密码 </div></el-col>
                <el-col :span="13"><el-input type="password" v-model="newPwd1"  @blur="pwd1Empty(),pwd2Empty()" /></el-col>
                <el-col :span="6"><div v-if="newPwd1Display" class="fontColor" >不能为空</div></el-col>
            </el-row><br>
            <el-row>
                <el-col :span="5"> <div class="font">请确认新密码 </div></el-col>
                <el-col :span="13"><el-input type="password" v-model="newPwd2"  @blur="pwd2Empty()" /></el-col>
                <el-col :span="6">
                    <div v-if="newPwd2Display" class="fontColor" >不能为空</div>
                    <div v-if="pwdAgreement" class="fontColor" >密码不一致</div>
                </el-col>
            </el-row><br>
            <el-row >
                <el-col :push="10"><div class="pwdChange" v-if="pwdChange">密码修改成功 </div></el-col>
                <el-col :push="10"><div class="fontColor" v-if="info">请将信息填写正确 </div></el-col>
            </el-row><br>
            <el-row >
                <el-col :push="10"><el-button type="primary" @click="updatePwd()">确认</el-button></el-col>
            </el-row><br>
        </el-row>
    </div>    
</template>
<script>
import cookie from 'js-cookie'

export default {
    name: 'UpdatePassword',
    data(){
        return {
            //密码的值
            oldPwd:'',
            newPwd1:'',
            newPwd2:'',
            //密码的提示
            oldPwdDisplay:false,
            newPwd1Display:false,
            newPwd2Display:false,
            pwdAgreement:false,
            //旧密码错误信息
            oldPwdError:false,
            //修改成功信息
            pwdChange:false,
            //信息填写完整提示
            info:false,
            //用户信息
            user:{
                // name:'',
                // phone:'',
                // email:'',
                // updateTime:'1970/1/1'
            },
        }
    },
    created(){
        this.getUser()
    },
    methods: {
        //判断旧密码为空
        oldPwdEmpty(){
            if(this.oldPwd==''){
                this.oldPwdDisplay=true
                this.oldPwdError=false
                this.pwdChange=false
                this.info=false
            }else{
                this.oldPwdDisplay=false
                this.oldPwdError=false
                this.pwdChange=false
                this.info=false
            }
        },
        //判断新密码为空
        pwd1Empty(){
           if(this.newPwd1==''){
                this.newPwd1Display=true
                this.pwdChange=false
                this.info=false
            }else{
                this.newPwd1Display=false
                this.pwdChange=false
                this.info=false
            }
        },
        //判断密码为空和密码是否一致
        pwd2Empty(){
           if(this.newPwd2==''){
                this.newPwd2Display=true
                this.pwdAgreement=false
                this.pwdChange=false
                this.info=false
            }else{
                //密码是否一致
                if(this.newPwd1!=this.newPwd2){
                    this.newPwd2Display=false
                    this.pwdAgreement=true
                    this.pwdChange=false
                    this.info=false
                }else{
                    this.pwdAgreement=false
                    this.newPwd2Display=false
                    this.pwdChange=false
                    this.info=false
                }
               
            }
        },
        //修改密码,返回true则,修改成功,返回false则旧密码错误
        updatePwd(){
            if(this.oldPwd!=''&&this.newPwd1!=''&&this.newPwd2!=''&&!this.oldPwdDisplay&&!this.newPwd1Display&&!this.newPwd2Display&&!this.pwdAgreement){
                this.$http.get("http://localhost:7001/demo4/updatePwd/"+this.user.id+"/"+this.oldPwd+"/"+this.newPwd1).then(res=>{
                    console.log(res.data.status)
                    console.log(res.data.user)
                    cookie.set("userInfo",res.data.user,{expires: 7,domain: "localhost"})
                    if(!res.data.status){
                        this.oldPwdError=true
                        this.pwdChange=false
                        this.info=false
                        this.oldPwd=''
                        this.newPwd1=''
                        this.newPwd2=''
                    }else{
                        this.oldPwdError=false
                        this.oldPwd=''
                        this.newPwd1=''
                        this.newPwd2=''
                        this.pwdChange=true
                        this.info=false
                    }
                })
            }else{
                this.info=true
            }
            
        },
        //从cookie中获取用户信息
        getUser(){
            this.user=JSON.parse(cookie.get("userInfo"))
            console.log(this.user.phone)
            console.log(this.user)
        },
    },
    


}
</script>
<style>
    #user-center-accountSettings-updatePassword-contrainer-header {
        font-size: 20px;
    }
    #user-center-accountSettings-updatePassword-contrainer-main {
        width: 50%;
        margin: auto;
    }
    .fontColor{
        color: red;
        padding-top: 10px;
        padding-left: 20px;
    }
    .font{
        padding-top: 10px;
    }
    .pwdChange{
        color: green;
    }
</style>